<template>
	<view class="my-container">

		<view class="my-info">
			<image src="../../static/my/tx.png" mode="" class="my-image"></image>
			<image src="../../static/my/gt.png" mode="" class="my-image-gt"></image>
			<view class="info-1" @click.stop="toMyDetail">
				<image src="../../static/my/tx.png" mode="" class="avatar"></image>
				<view class="avatar-info">
					<view class="info-1-top">
						<view class="info-name">
							赵敏
						</view>
						<view class="info-tag1">
							女 24岁
						</view>
						<view class="info-tag2">
							IP : {{localtion}}
						</view>
					</view>
					<view class="info-1-id">
						ID：00023-00021
					</view>
					<view class="info-1-grade" @click.stop="toStar">
						<view class="grade-title">
							诚信等级
						</view>
						<image src="../../static/my/xx.png" mode=""></image>
						<image src="../../static/my/xx.png" mode=""></image>
						<image src="../../static/my/xx.png" mode=""></image>
						<image src="../../static/my/xx.png" mode=""></image>
						<image src="../../static/my/xx.png" mode=""></image>
					</view>
				</view>
			</view>

			<view class="info-2">
				<view class="info-2-grade">
					<image src="../../static/my/dt.png" mode=""></image>
					<view class="grade-content">
						<view class="info2-grade-title">
							VIP2
						</view>
						<view class="info2-grade-sub-1">
							会员到期
						</view>
						<view class="info2-grade-sub-2">
							2023.12.12
						</view>
						<view class="info2-grade-image" @click="tovIP">
							<image src="../../static/my/ty2.png" mode=""></image>
							<view class="sj">
								升级VIP
							</view>
						</view>
					</view>
				</view>
				<view class="info-2-grade">
					<image src="../../static/my/dt.png" mode=""></image>
					<view class="grade-content">
						<view class="info2-grade-title">
							<image src="../../static/my/zise.png" mode="" class="i-image"></image>
							245
						</view>
						<view class="info2-grade-sub-1">
							我的星月豆余额
						</view>
						<view class="info2-grade-image-2">
							<image src="../../static/my/ty.png" mode=""></image>
							<view class="sj" style="color: #5F23D6;" @click="Recharge">
								立即充值
							</view>
						</view>
					</view>
				</view>
				<view class="info-2-grade">
					<image src="../../static/my/dt.png" mode=""></image>
					<view class="grade-content">
						<view class="info2-grade-title">
							19%
						</view>
						<view class="info2-grade-sub-1">
							资料完整度
						</view>
						<view class="info2-grade-image-2">
							<image src="../../static/my/ty2.png" mode=""></image>
							<view class="sj">
								去编辑
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>


		<view class="my-auth">
			<view class="auth-title">
				<view class="title-left">
					会员认证
				</view>
				<view class="title-right">
					点击图标进行认证
				</view>
			</view>
			<view class="auth-tags">
				<view class="tag" v-for="(item,index) in tags" :key="index" @click="toAuth(index)">
					<view class="tag-top">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="tag-bottom">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>

		<view class="my-link">
			<uv-cell-group :border="false">
				<uv-cell isLink url="/pages/complaint/index" :border="false" customStyle="margin-bottom: 20rpx;">
					<template v-slot:title>
						<view style="font-size: 32rpx;font-family: PingFangSC;font-weight: 600;color: #333333;">
							投诉与建议</view>
					</template>
					<!-- 自定义右侧图标 -->
					<template v-slot:right-icon>
						<uv-icon size="30rpx" name="arrow-right"></uv-icon>
					</template>
				</uv-cell>
				<uv-cell isLink url="/pages/agreement/index" :border="false" customStyle="margin-bottom: 20rpx;">
					<template v-slot:title>
						<view style="font-size: 32rpx;font-family: PingFangSC;font-weight: 600;color: #333333;">
							账号与安全</view>
					</template>
					<!-- 自定义右侧图标 -->
					<template v-slot:right-icon>
						<uv-icon size="30rpx" name="arrow-right"></uv-icon>
					</template>
				</uv-cell>
				<uv-cell isLink url="/pages/login/index" :border="false" customStyle="margin-bottom: 20rpx;">
					<template v-slot:title>
						<view style="font-size: 32rpx;font-family: PingFangSC;font-weight: 600;color: #333333;">
							退出登录</view>
					</template>
					<!-- 自定义右侧图标 -->
					<template v-slot:right-icon>
						<uv-icon size="30rpx" name="arrow-right"></uv-icon>
					</template>
				</uv-cell>
			</uv-cell-group>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				localtion: "",
				tags: [{
					title: "手机",
					image: "../../static/my/sj-h.png",
					activeImage: "../../static/my/sj-h.png"
				}, {
					title: "身份证",
					image: "../../static/my/sfz-h.png",
					activeImage: "../../static/my/sfz-h.png",
				}, {
					title: "婚姻",
					image: "../../static/my/hy-h.png",
					activeImage: "../../static/my/hy.png",
				}, {
					title: "学历",
					image: "../../static/my/xl-h.png",
					activeImage: "../../static/my/xl.png",
				}, {
					title: "房产",
					image: "../../static/my/fc-h.png",
					activeImage: "../../static/my/fc.png",
				}, {
					title: "汽车",
					image: "../../static/my/qc-h.png",
					activeImage: "../../static/my/qc.png",
				}, {
					title: "工作",
					image: "../../static/my/gz-h.png",
					activeImage: "../../static/my/gz.png",
				}]
			}
		},
		created() {
			this.getLocation()
		},
		methods: {
			getLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						this.localtion = res.address.city
					}
				});
			},
			toMyDetail() {
				let url = '../../subcontract/myDetail/index'
				uni.navigateTo({
					url: url
				})
			},
			toStar() {
				let url = '../../subcontract/myStar/index'
				uni.navigateTo({
					url: url
				})
			},
			tovIP() {
				let url = '../../subcontract/vip/index'
				uni.navigateTo({
					url: url
				})
			},
			Recharge() {
				let url = '../../subcontract/recharge/index'
				uni.navigateTo({
					url: url
				})
			},
			toAuth(index) {
				if (index == 1) {
					let url = '../../pages/idcard/index'
					uni.navigateTo({
						url: url
					})
				} else {
					let url = '../../subcontract/rembership/index?atype=' + index
					uni.navigateTo({
						url: url
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-container {


		.my-info {
			height: 1054rpx;
			width: 750rpx;
			position: relative;

			.my-image {
				height: 1072rpx;
				width: 750rpx;
				position: absolute;
				z-index: 2;

			}

			.my-image-gt {
				height: 494rpx;
				width: 750rpx;
				position: absolute;
				z-index: 4;
				top: 560rpx;
				left: 0rpx;
			}

			// 上侧头像等
			.info-1 {
				height: 152rpx;
				width: 700rpx;
				display: flex;
				// background-color: #fff;
				z-index: 5;
				position: absolute;
				bottom: 344rpx;
				left: 24rpx;

				.avatar {
					width: 152rpx;
					height: 152rpx;
					border-radius: 50%;
					object-fit: contain;
					border: 2rpx solid #fff;
				}

				.avatar-info {
					width: 332rpx;
					height: 152rpx;
					// background-color: red;
					margin-left: 28rpx;
					padding-top: 8rpx;
					box-sizing: border-box;

					.info-1-top {
						// background-color: #fff;
						height: 40rpx;
						width: 332rpx;
						display: flex;
						align-items: center;

						.info-name {
							font-size: 32rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							color: #FFFFFF;
						}

						.info-tag1 {
							width: 112rpx;
							height: 40rpx;
							background: rgba(243, 243, 243, 0.25);
							border-radius: 30rpx;
							backdrop-filter: blur(10px);
							margin-left: 20rpx;
							font-size: 20rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							display: flex;
							justify-content: center;
							align-items: center;
						}

						.info-tag2 {
							width: 112rpx;
							height: 40rpx;
							background: rgba(243, 243, 243, 0.25);
							border-radius: 30rpx;
							backdrop-filter: blur(10px);
							margin-left: 16rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 20rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
						}
					}

					.info-1-id {
						width: 332rpx;
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #fff;
						// opacity: 0.5;
						line-height: 34rpx;
						margin-top: 20rpx;
						// background-color: #fff;
					}

					.info-1-grade {
						width: 332rpx;
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 34rpx;
						margin-top: 12rpx;
						display: flex;
						align-items: center;

						.grade-title {
							margin-right: 10rpx;
						}

						// background-color: #fff;
						image {
							width: 20rpx;
							height: 19rpx;
							margin-left: 6rpx;
						}
					}
				}
			}


			// 下侧等级
			.info-2 {
				height: 280rpx;
				width: 700rpx;
				// margin-top: 32rpx;
				display: flex;
				justify-content: space-between;
				z-index: 999;
				position: absolute;
				bottom: 32rpx;
				left: 24rpx;

				.info-2-grade {
					width: 220rpx;
					height: 280rpx;
					border-radius: 16rpx;
					position: relative;

					image {
						width: 220rpx;
						height: 280rpx;
						position: absolute;
						z-index: 2;
					}

					.grade-content {
						width: 220rpx;
						height: 280rpx;
						position: absolute;
						z-index: 3;
						padding-top: 24rpx;
						box-sizing: border-box;

						.info2-grade-title {
							width: 220rpx;
							// margin-left: 60rpx;
							// margin-right: 60rpx;
							display: flex;
							justify-content: center;
							height: 58rpx;
							font-size: 48rpx;
							font-family: D-DIN-PRO, D-DIN-PRO;
							font-weight: 800;
							color: #FFFFFF;
							// text-align: center;
							// line-height: 58rpx;
							align-items: center;

							.i-image {
								width: 46rpx;
								height: 46rpx;
								margin-right: 140rpx;

							}
						}

						.info2-grade-sub-1 {
							width: 220rpx;
							height: 31rpx;
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							display: flex;
							justify-content: center;
							margin-top: 32rpx;
						}

						.info2-grade-sub-2 {
							width: 220rpx;
							height: 31rpx;
							font-size: 24rpx;
							font-family: D-DIN-PRO-SemiBold;
							font-weight: 400;
							color: #FFFFFF;
							display: flex;
							justify-content: center;
						}

						.info2-grade-image {
							width: 220rpx;
							height: 60rpx;
							margin-top: 20rpx;
							display: flex;
							justify-content: center;
							position: relative;


							image {
								width: 142rpx;
								height: 60rpx;
								position: absolute;
							}

							.sj {
								// width: 86rpx;
								height: 34rpx;
								font-size: 24rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 600;
								color: #BB4D4D;
								position: absolute;
								left: 64rpx;
								top: 14rpx;
								z-index: 6;

							}
						}

						.info2-grade-image-2 {
							width: 220rpx;
							height: 60rpx;
							margin-top: 48rpx;
							display: flex;
							justify-content: center;
							position: relative;


							image {
								width: 142rpx;
								height: 60rpx;
								position: absolute;
							}

							.sj {
								// width: 86rpx;
								height: 34rpx;
								font-size: 24rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 600;
								color: #BB4D4D;
								position: absolute;
								left: 64rpx;
								top: 14rpx;
								z-index: 6;

							}
						}



					}
				}
			}
		}

		.my-auth {
			width: 750rpx;
			height: 240rpx;
			border-radius: 18rpx;
			border: 2rpx solid #F6F6F6;
			position: absolute;
			top: 1050rpx;
			z-index: 5;
			background-color: #fff;
			padding-top: 32rpx;
			padding-left: 48rpx;
			padding-right: 48rpx;
			box-sizing: border-box;

			.auth-title {
				display: flex;
				align-items: center;
				height: 44rpx;

				.title-left {
					width: 130rpx;
					height: 44rpx;
					font-size: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 44rpx;
				}

				.title-right {
					width: 202rpx;
					height: 34rpx;
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;
					margin-left: 18rpx;
					margin-top: 8rpx;
				}
			}

			.auth-tags {
				// background-color: red;
				width: 100%;
				height: 92rpx;
				margin-top: 40rpx;
				display: flex;
				justify-content: space-between;

				.tag {
					width: 72rpx;
					height: 92rpx;
					background-color: #fff;

					.tag-top {
						width: 72rpx;
						height: 36rpx;
						display: flex;
						justify-content: center;

						image {
							width: 36rpx;
							height: 36rpx;
						}
					}

					.tag-bottom {
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #333333;
						display: flex;
						justify-content: center;
						margin-top: 22rpx;
					}
				}
			}

		}



		.my-link {
			// position: absolute;
			// bottom: 0rpx;
			position: absolute;
			top: 1290rpx;
			width: 750rpx;
			padding-top: 40rpx;
			box-sizing: border-box;
			padding-bottom: 76rpx;
			padding-left: 24rpx;
		}

	}
</style>